import styles from './index.less';
import NavLink from 'umi/NavLink';
import router from 'umi/router';
import App from '../LUNBO/index';
import React from 'react';
class Header extends React.Component {
  render() {
    return (
      <div className={styles.head}>
        <div className={styles.top}>
          <img
            onClick={function() {
              router.goBack();
            }}
            className={styles.back}
            src="https://h5.1ting.com/touch/image/mobile/back_icon_normal_big.png"
          />
          <div className={styles.musicname}>音乐网</div>
        </div>
        <div className={styles.center}>
          <App />
          {/* <img
            className={styles.longimg}
            src="https://i0.hdslb.com/bfs/article/c05f767a38669d16e1dc370b859b77399bf4cfc1.jpg@1320w_742h.webp"
          /> */}
        </div>
        <div className={styles.bottom}>
          <ul>
            <li>
              <NavLink to="/text/home" exact activeClassName={styles.active}>
                首页
              </NavLink>
            </li>
            <li>
              <NavLink to="/text/list" exact activeClassName={styles.active}>
                榜单
              </NavLink>
            </li>
            <li>
              <NavLink to="/text/sort" exact activeClassName={styles.active}>
                分类
              </NavLink>
            </li>
            <li>
              <NavLink to="/text/singer" exact activeClassName={styles.active}>
                歌手
              </NavLink>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default Header;
